.header {
  background-color: var(--background-color);
}

.nav {
  animation: zoomIn 0.3s ease-out;
}

.nav > a {
  @apply flex transform cursor-pointer p-2 duration-300;
}

.nav > a.active {
  color: var(--theme-color);
}

.nav.over {
  @apply absolute right-4 top-20 z-10 flex flex-col rounded p-3 shadow-sm;
  background-color: var(--background-color);
}

.nav svg {
  @apply mr-1;
}

.over a {
  @apply py-3;
}

.over svg {
  @apply mr-2;
}

.toggle span {
  @apply my-1 w-full transform rounded transition-all duration-300;
  height: 2px;
  background-color: var(--font-color);
}

.toggle.active span:first-child {
  @apply translate-y-2.5 rotate-45;
}

.toggle.active span:nth-child(2) {
  @apply opacity-0;
}

.toggle.active span:nth-child(3) {
  @apply -translate-y-2.5 -rotate-45;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
